<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {OSM} from 'ol/source'
    import TileLayer from 'ol/layer/Tile'
    import {defaults as defaultControls} from 'ol/control.js';
    import {ScaleLine} from 'ol/control'

    export default {
        name: "ScaleLineControl",
        data() {
            return {
                map: null,
            }
        },
        mounted() {
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    })
                ], controls: defaultControls({
                    zoom: false//禁用右上角缩放组件
                }),//地图控件
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 12,  //缩放到的级别
                })
            });
            this.scaleLineCtl();
        },
        methods: {
            scaleLineCtl() {
                //实例化比例尺控件（ScaleLine）
                var scaleLineControl = new ScaleLine({
                    //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
                    units: "metric",
                    bar: true,//渲染比例尺而不是一条线
                    text: true,//渲染比例尺上方的文本比例。仅适用于baris true
                });
                this.map.addControl(scaleLineControl)
            }
        }

    }
</script>

<style scoped>

</style>